<template>
  <div>
    <!-- inline 表单行内模式 -->
    <!-- 表单部分 搜索部分 -->
     <div class="search_wrap">
       <el-form inline >
        <el-form-item label="用户名称">
          <el-input placeholder="输入用户名称"></el-input>
        </el-form-item>
         <el-form-item label="手机号码">
          <el-input placeholder="输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select>
            <el-option value="1" label="正常"></el-option>
            <el-option value="2" label="禁用"></el-option>
          </el-select>
         </el-form-item>
         <el-form-item label="创建时间">
          <!-- 日期选择器 -->
           <el-date-picker
              v-model="valdate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
         </el-form-item>
         <el-form-item>
          <el-button type="primary">
            <i class="el-icon-search"></i>
            搜索
          </el-button>
           <el-button >
            <i class="el-icon-refresh"></i>
            重置
          </el-button>
         </el-form-item>
       </el-form>
     </div>
     <!-- 按钮组部分 -->
      <div style="width: 1200px; margin: 20px auto">
        <el-button plain type="primary">
          <i class="el-icon-plus"></i>
          新增
        </el-button>
         <el-button plain type="success">
          <i class="el-icon-edit"></i>
          修改
        </el-button>
         <el-button plain type="danger">
          <i class="el-icon-delete"></i>
          删除
        </el-button>
         <el-button plain type="info">
          <i class="el-icon-upload2"></i>
          导入
        </el-button>
         <el-button plain type="warning">
          <i class="el-icon-download"></i>
          导入
        </el-button>
      </div>
      <!-- 表格部分 -->
       <div class="table_wrap" style="width: 1200px; margin: 20px auto">
        <!-- header-row-class-name 表头行的class -->
         <!-- 表格加载数据的属性 :data -->
        <el-table :data="tableData" border stripe :header-row-class-name="run">
          <!-- 复选框 type="selection"-->
      
           <el-table-column type="selection" width="55"></el-table-column>
                <!-- 表格的数据直接渲染 用prop="数据字段名" -->
          <el-table-column prop="userid" label="用户编号"></el-table-column>
          <el-table-column prop="username" label="用户名称"></el-table-column>
          <el-table-column prop="nickname" label="用户昵称"></el-table-column>
          <el-table-column prop="dept" label="部门"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column label="状态">
            <!-- elementui的表格 用作用域插槽渲染内容
              #default="{row}" 获取表格的当前行数据 -->
             <template #default="{row}">
              <div>
                  <el-switch v-model="row.status"  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
              </div>
             </template>
          </el-table-column>
          <el-table-column prop="createtime" label="创建时间">

          </el-table-column>
          <!-- 用作用域插槽自定义操作列表 -->
          <el-table-column label="操作" width="300">
             <template #default="{row}" >
              <div v-if="row.userid!=1">
                 <el-link  icon="el-icon-edit" type="primary">
                   修改
                </el-link>
                 <el-link  style="margin: 0 20px;" icon="el-icon-delete" type="primary">
                   删除
                </el-link>
                 <el-link  icon="el-icon-d-arrow-right" type="primary">
                   更多
                </el-link>
              </div>
             </template>
          </el-table-column>
        </el-table>
        <div class="page_wrap" style="margin-top: 20px;
        display: flex; justify-content: flex-end;">
          <!-- 分页器组件
           分页组件的布局 layout来决定
           layout的  jumper跳转第几页 total 共多少页
           sizes 每页条数选择   -->
           <el-pagination background
         
               layout="jumper,total, prev, pager, next,sizes"
              :current-page="1"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              :total="400">
            </el-pagination>
        </div>

       </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      valdate:"",
      tableData:[ //表格数据 
        {userid:1,username:"zhangsan",nickname:"小三",dept:"技术部",phone:"123456789",status:true,createtime:"2020-10-10"},
        {userid:2,username:"lisi",nickname:"小四",dept:"市场部",phone:"123456789",status:false,createtime:"2020-10-10"},
        {userid:3,username:"wangwu",nickname:"小五",dept:"人事部",phone:"123456789",status:false,createtime:"2020-10-10"},
        {userid:4,username:"zhaoliu",nickname:"小六",dept:"财务部",phone:"123456789",status:true,createtime:"2020-10-10"},
        {userid:5,username:"qianshi",nickname:"小七",dept:"技术部",phone:"123456789",status:false,createtime:"2020-10-10"},
      ]
    }
  },
  methods:{
    run({row,rowIndex}){
      return "headerClass"
    }
  }
}
</script>
    <!-- // 样式击穿  vue想修改组件库内的样式 要加样式击穿
    // 样式击穿的写法 1 /deep/   
    // 样式击穿的写法 2  ::v-deep -->
<style lang="scss">
    .search_wrap{
      width: 1200px;
      margin: 20px auto;
    }
    .headerClass{ //给表头加的class
      th{
         background-color:#f5f5f5 !important;
         text-align:center !important;
         font-weight: 900 !important;
       }
    }
    
    .el-table .el-table__row td{
      text-align: center !important;
    }

</style>